<script setup lang="ts">
import { ref } from 'vue'

// 使用 TypeScript 接口定义 props 类型
interface Props {
  msg: string
  pageName: string
}

// 使用 defineProps 定义组件属性
const props = defineProps<Props>()

const count = ref(0)
</script>

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h1>This is an {{ pageName }} page</h1>
    <h3>Current Page: {{ pageName }}</h3>
    <div class="card">
      <button type="button" @click="count++">count is {{ count }}</button>
      <p>
        Edit
        <code>components/HelloWorld.vue</code> to test HMR
      </p>
    </div>
  </div>
</template>

<style scoped>
.hello {
  margin-top: 20px;
}

.card {
  padding: 2em;
}
</style>
